<template>
	<view class="u-page">
		<view class="u-page__item">
			<text class="u-page__item__title">基础功能</text>
			<u-tabbar :value="value1" @change="change1" :fixed="false" :placeholder="false"
				:safeAreaInsetBottom="false">
				<u-tabbar-item text="首页" icon="home" @click="click1"></u-tabbar-item>
				<u-tabbar-item text="放映厅" icon="photo" @click="click1"></u-tabbar-item>
				<u-tabbar-item text="直播" icon="play-right" @click="click1"></u-tabbar-item>
				<u-tabbar-item text="我的" icon="account" @click="click1"></u-tabbar-item>
			</u-tabbar>
		</view>
		<view class="u-page__item">
			<text class="u-page__item__title">显示徽标</text>
			<u-tabbar :value="value2" :placeholder="false" @change="name => value2 = name" :fixed="false"
				:safeAreaInsetBottom="false">
				<u-tabbar-item text="首页" icon="home" dot></u-tabbar-item>
				<u-tabbar-item text="放映厅" icon="photo" badge="3"></u-tabbar-item>
				<u-tabbar-item text="直播" icon="play-right"></u-tabbar-item>
				<u-tabbar-item text="我的" icon="account"></u-tabbar-item>
			</u-tabbar>
		</view>
		<view class="u-page__item">
			<text class="u-page__item__title">匹配标签的名称</text>
			<u-tabbar :placeholder="false" :value="value3" @change="name => value3 = name" :fixed="false"
				:safeAreaInsetBottom="false">
				<u-tabbar-item text="首页" icon="home" name="home"></u-tabbar-item>
				<u-tabbar-item text="放映厅" icon="photo" name="photo"></u-tabbar-item>
				<u-tabbar-item text="直播" icon="play-right" name="play-right"></u-tabbar-item>
				<u-tabbar-item text="我的" name="account" icon="account"></u-tabbar-item>
			</u-tabbar>
		</view>
		<view class="u-page__item">
			<text class="u-page__item__title">自定义图标/颜色</text>
			<u-tabbar :value="value4" @change="name => value4 = name" :fixed="false" :placeholder="false"
				activeColor="#d81e06" :safeAreaInsetBottom="false">
				<u-tabbar-item text="首页">
					<template #active-icon>
						<image class="u-page__item__slot-icon" src="http://uview.d3u.cn/web/static/uview/common/bell-selected.png"></image>
					</template>
					<template #inactive-icon>
						<image class="u-page__item__slot-icon" src="http://uview.d3u.cn/web/static/uview/common/bell.png"></image>
					</template>
				</u-tabbar-item>
				<u-tabbar-item text="放映厅" icon="photo"></u-tabbar-item>
				<u-tabbar-item text="直播" icon="play-right"></u-tabbar-item>
				<u-tabbar-item text="我的" icon="account"></u-tabbar-item>
			</u-tabbar>
		</view>
		<view class="u-page__item">
			<text class="u-page__item__title">拦截切换事件(点击第二个标签)</text>
			<u-tabbar ref="tabbar5" :value="value5" :fixed="false" @change="change5" :safeAreaInsetBottom="false"
				:placeholder="false">
				<u-tabbar-item text="首页" icon="home">
				</u-tabbar-item>
				<u-tabbar-item text="放映厅" icon="photo"></u-tabbar-item>
				<u-tabbar-item text="直播" icon="play-right"></u-tabbar-item>
				<u-tabbar-item text="我的" icon="account"></u-tabbar-item>
			</u-tabbar>
		</view>
		<view class="u-page__item">
			<text class="u-page__item__title">去除上边框</text>
			<u-tabbar :value="value7" :placeholder="false" :border="false" @change="name => value7 = name"
				:fixed="false" :safeAreaInsetBottom="false">
				<u-tabbar-item text="首页" icon="home"></u-tabbar-item>
				<u-tabbar-item text="放映厅" icon="photo"></u-tabbar-item>
				<u-tabbar-item text="直播" icon="play-right"></u-tabbar-item>
				<u-tabbar-item text="我的" icon="account"></u-tabbar-item>
			</u-tabbar>
		</view>

		<view class="u-page__item">
			<text class="u-page__item__title">标签模式</text>
			<u-tabbar mode="tag" :value="value7" :placeholder="false" @change="name => value7 = name"
				:fixed="false" :safeAreaInsetBottom="false">
				<u-tabbar-item text="首页"></u-tabbar-item>
				<u-tabbar-item text="放映厅"></u-tabbar-item>
				<u-tabbar-item text="直播"></u-tabbar-item>
				<u-tabbar-item text="我的"></u-tabbar-item>
			</u-tabbar>
		</view>

		<view class="u-page__item" style="background-color: #f3f4f6;">
			<text class="u-page__item__title">悬浮胶囊标签栏(迷你样式)</text>
			<u-tabbar ref="tabbar6" :value="value6" bottom="0" :fixed="false" shape="circle" :fit="true" @change="name => value6 = name" height="34">
				<u-tabbar-item icon="home"></u-tabbar-item>
				<u-tabbar-item icon="photo"></u-tabbar-item>
				<u-tabbar-item icon="play-right"></u-tabbar-item>
			</u-tabbar>
		</view>

		<view class="u-page__item" style="background-color: #f3f4f6;">
			<text class="u-page__item__title">悬浮胶囊标签栏</text>
			<u-tabbar :value="value6" :fixed="false" bottom="0" shape="circle" @change="name => value6 = name">
				<u-tabbar-item text="首页" icon="home"></u-tabbar-item>
				<u-tabbar-item text="放映厅" icon="photo"></u-tabbar-item>
				<u-tabbar-item text="直播" icon="play-right"></u-tabbar-item>
				<u-tabbar-item text="我的" icon="account"></u-tabbar-item>
			</u-tabbar>
		</view>

		<view class="u-page__item">
			<text class="u-page__item__title">固定在底部(固定在屏幕最下方)</text>
			<u-gap height="150"></u-gap>
			<u-tabbar>
				<u-tabbar-item text="首页" icon="home" url="/pages/componentsB/tabbar/tabbar"></u-tabbar-item>
				<u-tabbar-item text="放映厅" icon="photo" url="/pages/componentsB/tabbar/tabbar1"></u-tabbar-item>
				<u-tabbar-item text="发布" icon="plus" :middle="true" iconSize="20" ></u-tabbar-item>
				<u-tabbar-item text="直播" icon="play-right" url="/pages/componentsB/tabbar/tabbar2"></u-tabbar-item>
				<u-tabbar-item text="我的" icon="account" url="/pages/componentsB/tabbar/tabbar3"></u-tabbar-item>
			</u-tabbar>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			value1: 0,
			value2: 1,
			value3: 'play-right',
			value4: 0,
			value5: 0,
			value6: 0,
			value7: 3
		}
	},
	onLoad() {

	},
	methods: {
		change5(name) {
	
			this.$refs.tabbar5.getRect().then(size => {
				console.log('tabbar5',size)
			})

			this.$refs.tabbar6.getRect().then(size => {
				console.log('tabbar6',size)
			})
	
			if (name === 1) return uni.$u.toast('请您先登录')
			else this.value5 = name
		},
		change1(e) {
			this.value1 = e
			console.log('change1', e);
		},
		click1(e) {
			console.log('click1', e);
		}
	},
}
</script>

<style lang="scss">
.u-page {
	padding: 0;

	&__item {

		&__title {
			color: $u-tips-color;
			background-color: $u-bg-color;
			padding: 15px;
			font-size: 15px;

			&__slot-title {
				color: $u-primary;
				font-size: 14px;
			}
		}

		&__slot-icon {
			width: 17px;
			height: 17px;
		}
	}
}
</style>
